<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>menu decorate 测试</title>
    <link href="../assets/menu.css" rel="stylesheet"/>
    <link href="../assets/menuitem.css" rel="stylesheet"/>
    <link href="../assets/submenu.css" rel="stylesheet"/>
    <link href="../assets/filtermenu.css" rel="stylesheet"/>
    <style>
        #menuTest,
        #menuTest2 {
            width: 300px;
        }
    </style>
</head>
<body>
<h1>
    从已有元素生成 KISSY Menu
</h1>

<div id="menuTest" class="ks-menu" tabindex="0">
    <div class="ks-menuitem">菜单1</div>
    <div class="ks-submenu ks-menuitem">
        <span class="ks-submenu-content ks-menu-content">菜单2</span>
        <span class="ks-submenu-arrow">►</span>
        <div class="ks-popupmenu ks-menu">
            <div class="ks-popupmenu-content">
                <div class="ks-menuitem">子菜单1</div>
                <div class="ks-menuitem">子菜单2</div>
            </div>
        </div>
    </div>
    <div class="ks-menuitem">菜单3</div>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>

    KISSY.use('menu', function (S, Menu) {
        window.menuTest = new Menu({
            srcNode: "#menuTest"
        }).render();
    });

</script>
</body>
</html>